<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            vertical-align: top;

        }

        body{
            background: url("1.jpg") no-repeat;
            background-size: cover;

        }
        #box{
            background-color: rgba(255,250,255,.8);
        }
        #box ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;


        }
        #box ul li{
            width: 180px;
            height: 120px;
            margin: 10px 0;
        }


    </style>
</head>
<body>
<div id="box">
    <ul>
        <li ><img src="1.jpg" alt=""></li>
        <li ><img src="2.jpg" alt=""></li>
        <li ><img src="3.jpg" alt=""></li>
        <li ><img src="4.jpg" alt=""></li>

    </ul>
</div>
<script>
    window.onload = function () {
        //get elem
        var  box = document.getElementById("box");
        var allLi = box.getElementsByTagName("li");
        console.log(allLi);
        //遍历监听
        for(var i=0;i<allLi.length;i++)
        {
            var sLi = allLi[i];
            sLi.index = i+1;
            sLi.onclick = function () {

                console.log(this.index);

                document.body.style.background =  'url("'+ this.index +'.jpg") ,no-repeat ';

            }
        }

    }
</script>
</body>
</html>